<template>
  <div class="md:flex">
    <template v-for="(item, index) in cardData" :key="item.title">
      <Card size="small" hoverable :loading="loading" :title="item.title" class="md:w-1/4 w-full !md:mt-0" :class="{ 'md:!mr-3': index + 1 < 5, '': index > 0 }">
        <template #extra>
          <Tag :color="item.color">{{ item.action }}</Tag>
        </template>
        <div class="flex items-center justify-between px-4 py-4">
          <CountTo :prefix="item.prefix" :startVal="1" :endVal="item.value" class="text-2xl" />
          <svg-icon :icon="item.icon" :size="40" />
        </div>
        <div class="flex justify-between p-2 px-4">
          <span>总{{ item.title }}</span>
          <count-to :prefix="item.prefix" :startVal="1" :endVal="item.total" />
        </div>
      </Card>
    </template>
  </div>
</template>
<script lang="ts" setup>
import { ref, onMounted, inject, watch } from 'vue';
import { CountTo } from '@components/common';
import { SvgIcon } from '@components/common';
import { Tag, Card } from 'ant-design-vue';
import { growCardList } from '../data';
import { growCard } from '@pkg/apis/sys';

let dateType = inject<any>('dateType');
let dateTypeValue = inject<any>('dateTypeValue');
let airportId = inject<any>('airportId');
let cardData: any = ref([]);

defineProps({
  loading: { type: Boolean },
});

function initData(params) {
  growCard(params).then((result) => {
    if (result) {
      cardData.value = result;
    } else {
      cardData.value = growCardList;
    }
  });
}

watch(dateType, (nweProps, oldProps) => {
  initData({
    dateRuleCode: dateType.value,
  });
});

watch(dateTypeValue, (nweProps, oldProps) => {
  initData({
    dateRuleCode: dateType.value,
    year: dateTypeValue.value,
  });
});

watch(airportId, (nweProps, oldProps) => {
  initData({
    dateRuleCode: dateType.value,
    year: dateTypeValue.value,
    airportId: airportId.value,
  });
});

onMounted(() => {
  initData({
    dateRuleCode: dateType.value,
  });
});
</script>
